<template>
  <fullScreenContainer title="湖南省农业优势特色产业集群信息系统"  type='fullScreenContainer'  >
    <template slot="leftContent">
      <Panel key="jdfj" title="基地分级" height="35%">
        <template slot="right">
          <div>
            <button @click="fn('1')">大类1</button>
            <button @click="fn('2')">大类2</button>
          </div>
        </template>
        <XyzTransition appear xyz="fade rotate-right ease-out-back">
          <dv-scroll-ranking-board
            class="triangle"
            v-if="type === '1'"
            :config="config"
            style="width: 100%; height: 80%"
          />
        </XyzTransition>
      </Panel>
      <Panel key="jdfl" title="基地分类" class="flex1" height="35%">
        <div
          class="animate__animated animate__bounceInLeft"
          style="display: flex; justify-content: space-between; height: 15%"
        >
          <div style="display: flex; flex-direction: column">
            <span class="zb">指标名称1</span>
            <CountTo
              class="num"
              :start-val="0"
              :end-val="100"
              :duration="5000"
            ></CountTo>
          </div>
          <div style="display: flex; flex-direction: column">
            <span class="zb">指标名称2</span>
            <CountTo
              class="num"
              :start-val="0"
              :end-val="100"
              :duration="5000"
            ></CountTo>
          </div>
          <div style="display: flex; flex-direction: column">
            <span class="zb">指标名称</span>
            <CountTo
              class="num"
              :start-val="0"
              :end-val="100"
              :duration="5000"
            ></CountTo>
          </div>
        </div>
        <div style="height: 85%">
          <EchartsDemo style="height: 85%"></EchartsDemo>
        </div>
      </Panel>
      <Panel key="jdyyms" title="基地运营模式" class="flex1" height="30%">
        <EchartsDemo style="height: 90%"></EchartsDemo>
      </Panel>
    </template>
    <template slot="rightContent">
      <Panel key="cgmj" title="场馆面积" class="flex1" height="35%">
        <EchartsDemo :chartData="[]" :initChart="line" style="height: 85%;"></EchartsDemo>
      </Panel>
      <Panel key="xjnrfx" title="宣教内容分析" class="flex1" height="30%">
        <dv-scroll-board
          v-mouseenter="handleMouseEnterTrack"
          style="height: 85%"
          :config="dataVconfig2"
        />
      </Panel>
      <Panel
        key="rsfx"
        title="近一年接待群众人数分析"
        class="flex1"
        height="35%"
      >

        <EchartsDemo :chartData="[]" :initChart="bar" style="height: 90%"></EchartsDemo>
      </Panel>
    </template>
    <template slot="fullScreenMap">
      <div class="map-page-container">
        <Map ref="Map"></Map>
      </div>
    </template>
    <template slot="centerContent">
      <map-tools></map-tools>
    </template>
  </fullScreenContainer>
</template>
<script>
import CountTo from "vue-count-to";
import Map from '@/Iframe/kcgis3x.vue'
import MapTools from '@/layout/components/Center/index.vue'
import EchartsDemo from '@/echartsDemo/index.vue'
import tinycolor from 'tinycolor2'
import line from './line/initChart'
import bar from './barChart'
export default {
  components: {
    CountTo,Map,MapTools,EchartsDemo
  },
  directives: {
    mouseenter: {
      bind(el, binding, vnode) {
        el.addEventListener("mouseenter", binding.value);
      },
      unbind(el, binding, vnode) {
        el.removeEventListener("mouseenter", binding.value);
      },
    },
  },
  data() {
    return {
      zoom: 15,
      dataVconfig2:{
      header: ["网格员名称", "联系方式", "离岗时间", "离角色置说明"],
      headerBGC:tinycolor('#124A3F').setAlpha(0.3).toString(),
      data: [
        [1, 2, 3, 4],
        [1, 2, 3, 4],
        [1, 2, 3, 4],
        [1, 2, 3, 4],
        [1, 2, 3, 4],
        [1, 2, 3, 4],
        [1, 2, 3, 4],
        [1, 2, 3, 4],
        [1, 2, 3, 4],
      ],
      oddRowBGC: "transparent",
      evenRowBGC: "transparent",
      waitTime:5000,
      rowNum: 5,
    },
      data3: [
        {
          name: "data1",
          value: [200, 3000, 20000, 35000, 50000, 18000],
        },
        {
          name: "data2",
          value: [5000, 14000, 28000, 26000, 42000, 21000],
        },
      ],
      mapStyle: "amap://styles/blue",
      center: [121.5273285, 31.21515044],
      circles: [
        {
          center: [121.5273285, 31.21515044],
          radius: 200,
          fillOpacity: 0.5,
          events: {
            click: () => {
              alert("click");
            },
          },
        },
      ],
      config: {
        data: [
          {
            name: "周口",
            value: 55,
          },
          {
            name: "南阳",
            value: 120,
          },
          {
            name: "西峡",
            value: 78,
          },
          {
            name: "驻马店",
            value: 66,
          },
          {
            name: "新乡",
            value: 80,
          },
          {
            name: "信阳",
            value: 45,
          },
          {
            name: "漯河",
            value: 29,
          },
        ],
        awaitTime:5000
      },
      type: "1",
    };
  },
  methods: {
    changeData2() {},
    initCallback(option, chart) {},
    setUpdate(chart) {},
    fn(type) {
      this.type = type;
    },
    handleMouseEnterTrack(){

    },
    line,bar
  },
  mounted() {},
};
</script>
<style scoped lang="scss">
.num,.zb {
  color: #fff;
}
</style>
